<template>
  <div class="detail_box">
    <el-tabs v-model="activeName">
      <el-tab-pane label="工程信息" name="first">
        <div class="detail">
          <el-form ref="dataForm" :rules="rules" :model="temp" label-position="top" size="small">
            <el-row :gutter="20">
              <el-col :span="14">
                <el-form-item label="作业类型" prop="type">
                  <span class="lable">{{ detailInfo.jobTypes || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="工程名称" prop="name">
                  <span class="lable">{{ detailInfo.name || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="工程编号">
                  <span class="lable">{{ detailInfo.number || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="勘察时间" prop="surveyDate">
                  <el-date-picker
                    style="width:100%"
                    v-model="temp.surveyDate"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="timestamp"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="工作负责人" prop="leader">
                  <el-select style="width:100%" filterable clearable v-model="temp.leader" placeholder="请选择">
                    <user-option></user-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="勘察人员" prop="principals">
                  <el-input
                    v-model="temp.principals"
                    placeholder="请输入勘察人员"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="勘察地点" prop="location">
                  <el-input
                    v-model="temp.location"
                    placeholder="请输入勘察地点"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-row>
          <el-col>
            <el-button type="primary" @click="next()">下一步</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="勘察作业" name="second">
        <div class="detail">
          <div class="c-title">请在app填写并提交</div>
          <el-row style="margin-top: 60px;">
            <el-col>
              <el-button @click="activeName = 'first'">上一步</el-button>
              <el-button type="primary" @click="submit()">保存</el-button>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div> 
</template>
<script>
import { updateSurvey } from '@/api/survey/index'
import UserOption from '@/components/selectOption/users'
export default {
  name: "editDetail",
  props:{
    detailInfo:{
      type: Object
    }
  },
  components: {
    UserOption
  },
  data() {
    return {
      activeName: 'first',
      temp: {
        id: this.detailInfo.id,
        leader: this.detailInfo.leader,
        principals: this.detailInfo.principals,
        surveyDate: this.detailInfo.surveyDate + '',
        location: this.detailInfo.location
      },
      rules: {
        leader: [
          { required: true, message: '请选择负责人', trigger: 'blur'}
        ],
        surveyDate: [
          { required: true, message: '请选择勘察日期', trigger: 'blur'}
        ]
      }
    };
  },
  created() {
    
  },
  mounted() {
   
  },
  methods: {
    next() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.activeName = 'second'
        }
      })
    },
    submit() {
      updateSurvey(this.temp).then(res=> {
        this.$message.success('修改成功')
        this.$emit('close', true)
      })
    }

  }
};
</script>
<style scoped="scoped" lang="scss">
.label {
  color: #999999;
}
.c-title {
  color: #999999;
}
.detail_box {
  padding: 0px 20px 40px 20px;
  .detail {
    font-size: 15px;
    .content {
      white-space: pre-wrap;
    }
  }
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
}
</style>

